<template>
	<view>
		<view class="tabbar-title">
			<v-tabs v-model="activeTab" bgColor="#F0F3F6" :fixed="true" :lineScale="0.2" :scroll="false" :tabs="tabs" @change="changeTab" activeFontSize="32rpx" fontSize="30rpx"></v-tabs>
			
		</view>
		<!-- 电梯信息-  相关联系人 -->
		<view class="" v-show="activeTab == 0">
			<ElevatorDetail :elevatorInfo="elevatorInfo" :elevatorId="elevatorId"></ElevatorDetail>
			
			
		</view>
		<!-- 故障列表 -->
		<view class="" v-show="activeTab == 1">
			
			<view class="" v-if="recordList.length > 0">
				<uni-card v-for="(item,index) in recordList" :key="index">
					<view class="record" @click="navRouter(`../faultDetails/faultDetails?faultId=${item.faultId}`)">
						<view class="record-address">
							{{item.elevatorName}}
							<!-- <text>{{item.intervalTime}}</text> -->
						</view>
						<view class="record-state">[{{item.faultType}}]</view>
						<view class="information">
							<!-- left -->
							<view class="information-left">
								<view class="record-time">
									故障楼层:
									<text>{{item.faultFloor || '暂无'}}</text>
								</view>
								<view class="record-time">
									故障时长:
									<text>{{item.faultDuration || '暂无'}}</text>
								</view>
							</view>
							<!-- 已完成 right-->
							<view class="successState">
								<image src="../../../../static/img/fault/fault_icon.png" mode=""></image>
								<!-- <uni-icons type="success"></uni-icons> -->
								<view class="">
									<text>{{item.disposeState}}</text>
								</view>
							</view>
						</view>
					</view>
				</uni-card>
			</view>
			<view class="" v-else>
				<nullPage></nullPage>
			</view>
		</view>

	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import ElevatorDetail from '@/common/ElevatorDetail.vue'
	import polling from "@/serve/api/polling.js";
	import nullPage from '@/common/null.vue'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			ElevatorDetail,
			nullPage
		},
		data() {
			return {
				activeTab: 0,
				tabs: ['电梯信息', '故障'],
				// 相关联系人
				contactInformation: [
				],

				
				// 故障内容
				recordList: [],
				elevatorId: "", //电梯ID
				elevatorInfo: {},
				pageNum: 1,
				getListFlag: true,

			}
		},
		onLoad(e) {
			this.elevatorId = e.elevatorId
			uni.setNavigationBarTitle({
				title: e.title,
			})

			this.getElevatorDetail()
		},
		methods: {
			// 电梯详情
			async getElevatorDetail() {
				// let parme = {}
				const res = await polling.elevatorBaseInfo({
					elevatorId: this.elevatorId
				});
				this.elevatorInfo = res.data.data
			},
			// 显示全部
			showAll() {
				console.log(1111)
			},
			// 导航切换
			changeTab(index) {
				if (index == 1 && this.recordList.length == 0) {
					this.getFaultList();
				}
			},
			async getFaultList() {
				const res = await polling.elevatorFaultList({
					elevatorId: this.elevatorId,
					pageNum: this.pageNum,
					pageSize: 10,
				});
				if (res.data.data.list.length < 10) {
					this.getListFlag = false;
				}
				this.recordList.push(...res.data.data.list)
			},
			// 使用信息 展开 ，收起事件
			change(e) {

			},


		},
		onReachBottom(e) {
			if (this.getListFlag) {
				this.pageNum = this.pageNum + 1;
				this.getFaultList();
			}

		}
	}
</script>

<style scoped>
	/* .uni-view{
		height: 154rpx;
	} */
	.tabs {
		/* height: 200rpx; */
	}

	.v-tabs {}

	.v-tabs__container {
		height: 200rpx !important;
		line-height: 100rpx !important;
	}

	.uni-card {
		width: 670rpx;
		/* height: 820rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		border: none;
		margin-bottom: 30rpx;
	}

	.v-tabs {
		height: 154rpx;
		background-color: #F0F3F6;
	}

	.linkman {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-weight: bold;
		font-size: 30rpx;
		color: #34363D;
	}

	.linkman text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #017EFE;

	}

	.photo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.photo-img {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.photo-left {
		font-size: 30rpx;
		font-weight: 400;
		color: #34363D;
		margin-left: 30rpx;

	}

	.photo-admin {

		font-size: 24rpx;
		color: #989BA6;
	}

	/* 右边电话图标 */
	.photo image {
		width: 80rpx;
		height: 79rpx;
		border-radius: 50%;

	}

	.photo-icon {
		display: flex;
		/* justify-content: center; */
		align-items: center;
	}

	.photo-icon image {
		width: 36rpx;
		height: 37rpx;
		vertical-align: middle;
	}

	/* 使用信息 */
	.uni-collapse-item {
		color: #FFFFFF;
	}

	.uni-collapse-cell--open[data-v-8f47561c] {
		background-color: #FFFFFF;
	}

	/* 注册码 */
	.registration {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #989BA6;
		padding: 30rpx;
	}

	.registration text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #34363D;
	}

	.registration text:nth-child(4) {
		color: #017EFE;
	}

	/* 底部 */
	.footer {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		/* display: inline-block; */
		/* justify-content: center; */


	}

	.footer-div {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: center;

		height: 200rpx;
		background: #FFFFFF;

		border-radius: 16rpx;

	}

	.footer-image {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		border-right: 1px solid #E2E6EF;
	}

	.footer-image:nth-child(2) {
		border-right: none;
	}

	.footer-image image {
		width: 40rpx;
		height: 40rpx;

	}

	.footer-recordName {

		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #989BA6;

	}

	/* 故障样式 */
	/* .uni-icons{
		color:#FF5753 ;
	} */
	/* 	.uni-card{
			width: 670rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			border: none;
			line-height: 280rpx;
			text-align: left;
		} */
	.record {
		font-family: PingFang SC;
		font-weight: 400;
		/* margin: 40rpx 0; */
	}

	.record-address {
		font-size: 30rpx;
		color: #34363D;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.record-address text {
		color: #017EFE;
	}

	.record-state {
		font-size: 30rpx;
		color: #017EFE;
	}

	/* 左右 信息*/
	.information {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}

	.record-time {
		font-size: 24rpx;
		color: #989BA6;
	}

	.successState {
		width: 178rpx;
		background: #FF5753;
		height: 60rpx;
		text-align: center;
		box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2);
		border-radius: 28rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.successState image {
		width: 30rpx;
		height: 30rpx;
		background: #FF5753;
		border-radius: 10rpx;
		vertical-align: middle;
	}

	.successState text {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	/* 时间内容的间距 */
	.record-time text {
		margin-left: 15rpx;
		color: #34363D;
		word-spacing: 15rpx;
		letter-spacing: 1rpx;
	}
</style>
